{% extends "base.html" %}
{% block title %}{{ shop.name }}Home {% endblock %}

{% block page_content %}

{% block navigation %}
	{% navigation 'home' %}
{% endblock navigation %}

{% block breadcrumb %}
    {% breadcrumb 'True' %}
{% endblock breadcrumb %}

<section class="container-992 content">
	<section class="home-promo">
		<header class="fl">
			<h2>Welcome</h2>
			<p class="desktop">{{ layout.welcome_copy }}</p>
			<p class="mobile">{{ layout.welcome_copy|truncatewords:15 }}</p>
		</header>
	
		<ul class="fl">
			<li>
				<a href="{% url area %}">
					<img src="http://maps.googleapis.com/maps/api/staticmap?center={{ map.longitude }},{{ map.latitude }}&zoom={{ map.small_map_zoom }}&size=228x152&maptype=hybrid&sensor=false" />
				</a>
			</li>
		</ul>
		<div class="clear"></div>
	</section>
	
	<section class="home-services-small">
		<ul>
			<li class="fl first">
				<a href="{{ layout.small_item_1.get_absolute_url }}">
					<img src="{{ settings.MEDIA_URL }}{{ layout.small_item_1.hero_image }}" /> 
					<p>{{ layout.small_item_1.name|slice:":15" }} &raquo;</p>
				</a>
			</li>
			
			<li class="fl">
				<a href="{{ layout.small_item_2.get_absolute_url }}">
					<img src="{{ settings.MEDIA_URL }}{{ layout.small_item_2.hero_image }}" /> 
					<p>{{ layout.small_item_2.name|slice:":15" }} &raquo;</p>
				</a>
			</li>
			
			<li class="fl mobile-first">
				<a href="{{ layout.small_item_3.get_absolute_url }}">
					<img src="{{ settings.MEDIA_URL }}{{ layout.small_item_3.hero_image }}" /> 
					<p>{{ layout.small_item_3.name|slice:":15" }} &raquo;</p>
				</a>
			</li>
			
			<li class="fl">
				<a href="{{ layout.small_item_4.get_absolute_url }}">
					<img src="{{ settings.MEDIA_URL }}{{ layout.small_item_4.hero_image }}" /> 
					<p>{{ layout.small_item_4.name|slice:":15" }} &raquo;</p>
				</a>
			</li>
			
			<li class="fl mobile-last">
				<a href="{{ layout.small_item_5.get_absolute_url }}">
					<img src="{{ settings.MEDIA_URL }}{{ layout.small_item_5.hero_image }}" /> 
					<p>{{ layout.small_item_5.name|slice:":15" }} &raquo;</p>
				</a>
			</li>
		</ul>
		<div class="clear"></div>
	</section>
	
	<section class="home-services-large">
		<ul>
			<li class="first fl">
				<a href="{{ layout.large_item_1.get_absolute_url}}">
					<h4>{{ layout.large_item_1.name }}</h4>
					<img src="{{ settings.MEDIA_URL }}{{ layout.large_item_1.hero_image }}" />
					<p>{{ layout.large_item_1.description|slice:"110" }}... Read more</p>
				</a>
			</li>
		
			<li class="fl">
				<a href="{{ layout.large_item_2.get_absolute_url }}">
					<h4>{{ layout.large_item_2.name }}</h4>
					<img src="{{ settings.MEDIA_URL }}{{ layout.large_item_2.hero_image }}" />
					<p>{{ layout.large_item_2.description|slice:"110" }}... Read more</p>
				</a>
			</li>
		</ul>
		<div class="clear"></div>
	</section>
</section>
{% endblock page_content %}